<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <title>canvas文本格式屏幕录制</title>
    <link rel="stylesheet" href="./styles/main.css">
    <link rel="stylesheet" href="./styles/video.css">
</head>
<body>
  <div class='container'>
    <div class="paint-area">
      <div class="canvas-box ">
        <div class="canvas-area">
          <canvas id='canvas-record'></canvas>
          <div class="canvas-image" id="canvas-image">
            <div class='film'>
              <div class="grain"></div>
            </div>
            <img id="xiaolin" src="./image/l.jpg" alt="小林">
            <img id="yaoyao" src="./image/w.jpg" alt="瑶瑶">
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <script type="module">
    import {
      LvePaint,
      LvePlay
    } from './index.js'
    // <!-- 编辑器画板 -->
    const canvasId = document.querySelector('#canvas-record')
    const timeId = document.querySelector('#time')
    const lvePaint = new LvePaint({
      canvasId,
      timeId,
      canvasConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 开始录制
     **/
    window.startRecord = () => {
      lvePaint.startRecord()
    }
    /**
     * 暂停录制
     **/
    window.pauseRecord = () => {
      lvePaint.pauseRecord()
    }
    /**
     * 继续录制
     **/
    window.resumeRecord = () => {
      lvePaint.resumeRecord()
    }
    /**
     * 结束录制
     **/
    window.stopRecord = () => {
      lvePaint.stopRecord()
    };
    /**
     * 输出数据到textarea里
     **/
    window.exportData = () => {
      document.querySelector('#canvas-code').value = JSON.stringify(lvePaint.getData())
    }
    /**
     * 插入背景图片
     **/
    window.insertImage = () => {
      lvePaint.insertImage()
    }
    // <!-- 播放器视频 -->
    const videoId = document.querySelector('#video-record')
    const videoTime = document.querySelector('#video-time')
    const lvePlay = new LvePlay({
      videoId,
      timeId: videoTime,
      videoConfig: {
        width: 800,
        height: 400
      }
    })
    /**
     * 播放视频
     **/
    window.startPlay = () => {
      const data = document.querySelector('#video-code').value
      const ready = lvePlay.setData(data)
      if (ready) {
        lvePlay.startPlay()
      }
    }
    /**
     * 结束视频
     **/
    window.stopPlay = () => {
      // lvePlay.stopPlay()
    }
    /**
     * 导出视频
     **/
    window.exportVideo = () => {
      lvePlay.exportVideo()
    }
    const init = () => {
      const canvasImage = document.querySelector('#canvas-image');
      if (!canvasImage.classList.contains('old-movie')) {
        canvasImage.classList.add('old-movie');
      }
      const l = document.querySelector('#xiaolin');
      const w = document.querySelector('#yaoyao');
    }
    init();
  </script>
</body>
</html>
